import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; // 导入 Ant Design 图标
import { useState } from 'react';

interface Props {
  phone: string;
}
function PhoneNumberCell({ phone }: Props) {
  const [showFullPhone, setShowFullPhone] = useState(false);

  const handlePhoneClick = () => {
    setShowFullPhone(!showFullPhone);
  };

  const displayPhone = () => {
    if (phone) {
      return showFullPhone ? phone : `${phone.slice(0, 3)}****${phone.slice(-4)}`;
    }
    return '';
  };

  return (
    <span onClick={handlePhoneClick} style={{ cursor: 'pointer', alignItems: 'center' }}>
      {displayPhone()}
      {phone && (
        <span style={{ marginLeft: 5 }}>
          {showFullPhone ? <EyeInvisibleOutlined /> : <EyeTwoTone />}
        </span>
      )}
    </span>
  );
}

export default PhoneNumberCell;
